// TabBar.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import Icon from './Icon';
import gtag from '../google/analytics';
import { GtagEvent } from '../google/analytics/Event';

const Container = styled.div`
    z-index: 2;
    height: 4.6875rem;
    min-height: 4.6875rem;
    background-color: ${(prop) => prop.theme.background.normal};
`


const TabBarWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  background-color: ${(prop) => prop.theme.background.box};
  border-radius: .625rem;
  
`;

const TabLink = styled(NavLink)`
  text-decoration: none;
  color: #898D97;
  flex: 1;
`;

const Item = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`

const Text = styled.span`
    font-size: .75rem;
    margin-top: .3125rem;
    font-weight: bold;
`

export type LinkInfo = {
    path: string,
    icon?: {
        normal: string,
        active: string,
        width?: string
        height?: string
    },
    name?: string
}

interface Props {
    list: Array<LinkInfo>;
    className?: string;
    style?: React.CSSProperties;
    innerClassName?: string;
}

const TabBar: React.FC<Props> = ({ list, className, style, innerClassName }) => {
    const [active, setActive] = useState(-1)

    const location = useLocation();
    useEffect(() => {
        const idx = list.findIndex(e => e.path === location.pathname)
        if (idx !== -1) {
            setActive(idx)
        }
    }, [location, list]);

    const tabs = useMemo(() => {
        return list.map(item => (
            {
                ...item,
                path: item.path.includes('?') ? `${item.path}&tabbar=true` : `${item.path}?tabbar=true`
            }
        ))
    }, [list])

    const onClick = useCallback((item: { path: string }) => {
        gtag.event(GtagEvent.Tab, { path: item.path })
    }, [])

    return (
        <Container
            className={className}
            style={style}
        >
            <TabBarWrapper className={innerClassName}>
                {tabs.map((item, idx) => (
                    <TabLink
                        onClick={() => onClick(item)}
                        key={idx}
                        to={item.path}
                        style={() => idx === active ? { color: '#fff' } : { color: '#495a70' }}
                    >
                        <Item>
                            {item.icon && <Icon
                                width={item.icon.width || '1.5rem'}
                                height={item.icon.height}
                                name={idx === active ? item.icon.active : item.icon.normal}
                                style={{ fill: 'red' }}
                            />}
                            {item.name && <Text>{item.name}</Text>}
                        </Item>

                    </TabLink>))}
            </TabBarWrapper>
        </Container>
    );
}

export default TabBar;
